<template>
  <div>
    <div class="search">
      <el-form ref="queryList" label-width="80px" :inline="true" :model="queryList">
        <el-form-item label="ID" prop="userId"><el-input size="mini" placeholder="请输入ID" v-model="queryList.userId" ></el-input></el-form-item>
        <el-form-item label="姓名" prop="userName"><el-input size="mini" placeholder="请输入姓名" v-model="queryList.userName" ></el-input></el-form-item>
        <el-form-item label="权限" prop="permissions" style="height:28px">
          <!-- <el-input size="mini" placeholder="请输入权限" v-model="queryList.permissions">
            </el-input> -->
            <el-select v-model="queryList.permissions" filterable placeholder="请选择" style="height:28px">
                <el-option 
                style="height:28px"
                v-for="item in perSelect"
                :key="item.perName"
                :label="item.perName"
                :value="item.perId">
                </el-option>
            </el-select>
          </el-form-item>
      </el-form>
    
     <div class="searchEvent">
        <el-button type="primary" size="mini" @click="getPerInfo" class="el-icon-search" style="margin-top:8px">查询</el-button>
        <el-button type="primary" size="mini" class="el-icon-refresh" @click="reset">重置</el-button>
        <el-button type="primary" size="mini" class="el-icon-plus" @click="addPerDialog">新增</el-button>
      </div>
    </div>
    <!-- 表格 -->
    <el-table
        style="width: 100%"
        :data="perList"
         border>
        <el-table-column
        label="ID"
        width="180"
        prop="userId">
        </el-table-column>
        <el-table-column
        label="姓名"
        width="180"
        prop="userName">
        </el-table-column>
        <el-table-column
        label="权限"
        width="180"
        prop="permissions">
        <template  slot-scope="props">
          <span v-if="props.row.permissions=='1'">
            超级管理员
          </span>
          <span v-if="props.row.permissions=='2'">
           辅导员
          </span>
          <span v-if="props.row.permissions=='4'">
            管理员
          </span>
          <span v-if="props.row.permissions=='3'">
            寝室长
          </span>
        </template>
        </el-table-column>
        <el-table-column label="操作">
        <template slot-scope="scope">
            <el-button
            size="mini"
            type="danger"
            @click="handleDelete(scope.row)">删除</el-button>
            <el-button
            size="mini"
            type="danger"
            @click="handleEdit(scope.row)">修改权限</el-button>
            <el-button
            size="mini"
            type="danger"
            @click="handleEditPw(scope.row)">修改密码</el-button>
        </template>
        </el-table-column>
    </el-table>
    <!-- 新增弹框 -->
    <el-dialog title="新增权限" :visible.sync="addPerFormVisible" @close="canceladdPerDialog('addPerForm')">
      <el-form :model="addPerForm" :inline="true" ref="addPerForm">
        <el-form-item label="ID" prop="userId">
          <el-input v-model="addPerForm.userId"></el-input>
        </el-form-item>
        <el-form-item label="姓名" prop="userName">
          <el-input v-model="addPerForm.userName"></el-input>
        </el-form-item>
        <el-form-item label="权限" prop="permissions">
          <el-select v-model="addPerForm.permissions" filterable placeholder="请选择">
            <el-option 
            style="height:28px"
            v-for="item in perSelect"
            :key="item.perName"
            :label="item.perName"
            :value="item.perId">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="canceladdPerDialog('addPerForm')">取 消</el-button>
        <el-button type="primary" @click="addPer()">确 定</el-button>
      </div>
    </el-dialog>
  </div>  
</template>

<script>
import request from "@/utils/request";

export default {
  data() {
    return {
      activeName: '1',
      perList:[],
      //模糊查询列表
      queryList: {
        userId:'',
        userName:'',
        permissions:'',
      },
      perSelect:[{
          perName:"超级管理员",
          perId:"1"
        },{
          perName:"辅导员",
          perId:"2"

        },{
          perName:"管理员",
          perId:"4"
      }],
      addPerForm: {
        userId:'',
        userName:'',
        permissions:''
      },
      addPerFormVisible:false
    };
  },
  mounted () {
      this.getPerInfo()
  },
  methods: {
    getPerInfo(){
      var queryList = this.queryList
      request({
        url: "/api/perInfo/getPerInfo",
        method: "post",
        data: queryList
      }).then(res => {
        if (res.status == 200) {
          this.$message({
            message: "查询成功",
            type: "success"
          });
          console.log(res.list);
          this.perList = res.list
        }else{
          this.$message({
            message: "查询失败请重试！",
            type: "error"
          });
        }
      });
    },
    // 删除
    handleDelete(row){
      request({
        url: "/api/perInfo/reducePer",
        method: "post",
        data: {
          userId: row.userId,
          permissions:row.permissions
        }
      }).then(res => {
        if (res.status == 200) {
          this.$message({
            message: "删除成功",
            type: "success"
          });
          this.getPerInfo()
        }else{
          this.$message({
            message: "删除失败请重试!",
            type: "error"
          });
        }
      });
    },
    //修改权限
    handleEdit(row){
      this.$prompt('请输入权限(超级管理员:1;辅导员:2;管理员:4)', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          request({
        url: "/api/perInfo/updatePer",
        method: "post",
        data: {
          permissions:value,
          userId: row.userId
          }
      }).then(res => {
        if (res.status == 200) {
          this.$message({
            message: "修改权限成功",
            type: "success"
          });
          this.getPerInfo()
        }else{
          this.$message({
            message: "修改权限失败，请重试!",
            type: "error"
          });
        }
      });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
    },
    //修改密码
    handleEditPw(row){
      this.$prompt('请输入密码', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
        }).then(({ value }) => {
          request({
        url: "/api/perInfo/updatePerPw",
        method: "post",
        data: {
          passWord:value,
          userId: row.userId
          }
      }).then(res => {
        if (res.status == 200) {
          this.$message({
            message: "修改密码成功",
            type: "success"
          });
          this.getPerInfo()
        }else{
          this.$message({
            message: "修改密码失败，请重试!",
            type: "error"
          });
        }
      });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
    },
    resetForm(queryList){
      this.$refs[queryList].resetFields()
    },
    canceladdPerDialog(addPerForm){
      this.addPerFormVisible = false
      this.$refs[addPerForm].resetFields()
    },
    addPerDialog(){
      this.addPerFormVisible = true
    },
    // 新增
    addPer(){
      var addPerForm = this.addPerForm
      request({
        url: "/api/perInfo/addPerInfo",
        method: "post",
        data: {
          userId:addPerForm.userId,
          userName:addPerForm.userName,
          permissions:addPerForm.permissions,
        }
      }).then(res => {
        if (res.status == 200) {
          this.$message({
            message: "新增成功",
            type: "success"
          });
          this.getPerInfo()
        }else{
          this.$message({
            message: "新增失败请重试!",
            type: "error"
          });
        }
      });
      this.addPerFormVisible = false
      this.reset()
    },
    // 重置
    reset(){
      this.addPerForm.userId='',
        this.addPerForm.userName='',
       this.addPerForm.permissions='',
       this.queryList.userId='',
        this.queryList.userName='',
       this.queryList.permissions='',
       console.log(this.addPerForm);
      this.getPerInfo()
      },
    }
  }
</script>

<style Lang="less" scoped>
.el-tag {
  margin: 7px;
}
.bdtop {
  border-top: 1px solid #eee;
}
.bdbottom {
  border-bottom: 1px solid #eee;
}
.vcenter {
  display: flex;
  align-items: center;
}
.search {
  width: 100%;
  background: white;
}
.el-form-item {
  margin-left: 20px;
  margin-bottom: 10px;
}
.searchEvent {
  float: right;
  margin-left: 59px;
  margin-bottom: 15px;
}
/deep/ .el-input__inner{
  height: 28px;
}
</style>
